<template>
    <el-card>
    <div>
        <!-- 头顶 -->
        <el-breadcrumb separator="/" class="a">
            <!-- :to="{ path: '/users' }"  跳转 -->
            <el-breadcrumb-item :to="{ path: '/users' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="params" class="demo-form-inline">
            <el-form-item>
                <el-input :data="Dindanlist" style="width: 600px;" v-model="params.query" placeholder="请输入内容"></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>     
        </el-form>
        <!-- 表 -->
        <el-table
                :data="Dindanlist"
                max-height="420"
                style="width: 100%">
            <el-table-column  label="#" type="index" />
            <el-table-column label="订单编号" prop="order_number" />
            <el-table-column label="订单价格" prop="order_price" />
            <el-table-column label="是否付款">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.pay_status==='0'" style="color: red;">未付款</el-tag>
                    <el-tag v-else-if="scope.row.pay_status==='1'" style="color: gray;">已付款</el-tag> 
                </template>
            </el-table-column>
            <el-table-column label="是否发货" prop="is_send" />
            <el-table-column label="下单时间" prop="create_time" >
                <template slot-scope="s">
                    <span>{{ s.row.create_time |dateFormat }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"
                        @click="handleEdit(scope.row)">修改地址</el-button>
                    <el-button size="mini" type="danger"
                        @click="handlexiangqing(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
            <!-- current-page当前页
          page-size：每页记录数
          page-sizes：每页记录数下拉列表，第一个数与每页记录数必须一致
          total：总记录数 -->
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pagenum"
                :page-sizes="[1,5, 30, 50]"
                :page-size="params.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
        </el-pagination>
        
        <!-- 编辑 -->
        <!-- <el-dialog
            :visible.sync="dialogVisibles"
            width="30%">
            <el-form ref="customform" :model="bianJI" label-width="80px"
                                    status-icon :rules="rules">
                <el-form-item label="名称" prop="username">
                    <el-input v-model="bianJI.order_name"></el-input>
                </el-form-item>                    
                <el-form-item label="订单是否发货" prop="username">
                    <el-input v-model="bianJI.is_send"></el-input>
                </el-form-item>
                <el-form-item label="订单支付" prop="username">
                    <el-input v-model="bianJI.order_pay"></el-input>
                </el-form-item>
                <el-form-item label="订单价格" prop="username">
                    <el-input v-model="bianJI.order_price"></el-input>
                </el-form-item>
                <el-form-item label="订单数量" prop="username">
                    <el-input v-model="bianJI.order_number"></el-input>
                </el-form-item>
                <el-form-item label="支付状态" prop="username">
                    <el-input v-model="bianJI.pay_status"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibles = false">取 消</el-button>
                <el-button type="primary" @click="onUpdUser">编 辑</el-button>
            </span>
        </el-dialog>   -->
        
        <!-- 修改地址 -->
        <el-dialog
            :visible.sync="dialogVisibles"
            width="30%">
            <el-form ref="customform" :model="bianJI" label-width="100px"
                                    status-icon :rules="rules">
                <el-form-item label="请选择地址" style="width:300px">
                    <el-cascader
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="username">
                    <el-input v-model="bianJI.order_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibles = false">取 消</el-button>
                <el-button type="primary" @click="onUpdUser">编 辑</el-button>
            </span>
        </el-dialog>      
        
        <!-- 详情 -->
        <el-dialog
            :visible.sync="dialogVisibless"
            width="30%">
            <el-form ref="customform" :model="bianJI" label-width="80px"
                                    status-icon :rules="rules">
                <el-form-item label="用户id" prop="username">
                    <el-input v-model="bianJI.id"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="username">
                    <el-input v-model="bianJI.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="username">
                    <el-input v-model="bianJI.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibless = false">取 消</el-button>
                <el-button type="primary" @click="onXiangqing">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</el-card>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
    data(){
        return{
            //选择地址
            options: regionData,
            lectedOptions: [],
            //列表
            params:{
                query:'',
                pagenum:1,
                pagesize:5
            },
            rules:{

            },
            Dindanlist:[],
            bianJI:[],
            total:0,
            dialogVisibless:false,
            dialogVisibles:false,
        }
        
    },
    methods:{
        //选择地址
        handleChange(val) {
        // 将区域码转换成汉字
            console.log(CodeToText[val[0]])
            console.log(CodeToText[val[1]])
            console.log(CodeToText[val[2]])
        },
        
        //编辑更新
        async onUpdUser(){
            let {data}=await this.$http.put(`/api/private/v1/goods/${this.bianJI.order_id}`,
            {"is_send":this.bianJI.is_send,"order_pay":this.bianJI.order_pay,
            "order_price":this.bianJI.order_price,"order_number":this.bianJI.order_number,
            "pay_status":this.bianJI.pay_status,});
            this.initTable();
            this.dialogVisibles=false;
        },
        //编辑
        handleEdit(obj){
            this.bianJI=obj;
            this.dialogVisibles=true;
        },
        //点击详情确定
        onXiangqing(){
            this.dialogVisibless=false;
        },
        //详情
        handlexiangqing(){
            this.dialogVisibless=true;
        },
        //搜索
        async onSearch(){
            this.initTable();
        },
        //修改每页记录数
        handleSizeChange(val){
            this.params.pagesize=val*1;
            this.initTable();
        },
        //点击分页按钮
        handleCurrentChange(val){
            this.params.pagenum=val*1;
            this.initTable();
        },
        async initTable(){
            let {data}=await this.$http.get("/api/private/v1/orders",
            {params:this.params});
            this.Dindanlist=data.goods;
            console.log(data);
            this.total=data.total;
        }
    },
    async mounted(){
        this.initTable();
        }
    }

</script>

<style lang="scss" scoped>
    .el-header, .el-footer {
        background-color: #edeff3;
        color: #333(202, 68, 68);
        text-align: center;
        line-height: 60px;
        }
        .demo-form-inline{
            display: flex;
            flex-direction: row;
        }
        .to{
            display: flex;
            flex-direction: row;
           
        }
        .a{
            width: 100%;
            height: 60px;
            background-color: #e0e5ee;
            text-align: center;
            line-height: 60px;
        }
</style>